<template>
  <el-dialog
    :title="$t('message.baomin')"
    :visible.sync="showReserve"
    :close-on-click-modal="modalDialog"
    :close-on-press-escape="modalDialog"
    width="700px"
    class="dialog-reserve"
  >
    <el-table
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
    >
      <el-table-column align="center" :label="$t('message.yqhpq')" prop="name" min-width="180" show-overflow-tooltip />
      <el-table-column align="center" :label="$t('message.hdxm')" prop="projectName" min-width="120" show-overflow-tooltip />
      <el-table-column align="center" :label="$t('message.bmfy')" prop="price" min-width="100" show-overflow-tooltip />
      <el-table-column align="center" :label="$t('message.hdsj')" min-width="200" prop="acTime" show-overflow-tooltip />
    </el-table>
    <div class="zbt"><span class="secondColor">*</span>{{ $t('message.khxx') }}：</div>
    <div class="memberFlex">
      <MemberSearch ref="memberSearch" type="20" class="search" @clear="memberClear" @select="memberSelect" />
      <el-button class="ml10" :type="userType == 0?'':'primary'" @click="skBtn">{{ $t('message.sk') }}</el-button>
    </div>
    <div v-if="userType == 0 && members && members.nickName" class="member">
      <div>{{ $t('message.name') }}：{{ members.nickName }}</div>
      <div>{{ $t('message.sjh') }}：{{ members.phone }}</div>
      <!-- <div>{{ $t('message.hydj') }}：{{ members.cardName }}</div> -->
      <div>{{ $t('message.czye') }}：<span>{{ members.rechargeMoney|| members.remainingMoney || 0 }}</span></div>
      <div>{{ $t('message.zsye') }}：<span>{{ members.giveMoney || members.remainingGiveMoney || 0 }}</span></div>
    </div>
    <div v-if="userType == 1" class="skCnt">
      <el-input v-model="userName" :placeholder="$t('message.qsrskxm')" :maxlength="50" style="width: 39%;margin-right: 2%" />
      <el-input v-model="userPhone" :maxlength="11" :placeholder="$t('message.qsrsksjh')" style="width: 59%; " />
    </div>
    <div class="bzbt">{{ $t('message.bz') }}：</div>
    <el-input v-model="remarks" type="textarea" :autosize="{ minRows: 2, maxRows: 10 }" :placeholder="$t('message.qsr') + $t('message.bznr')" />
    <div slot="footer" class="dialog-footer">
      <el-button @click="showReserve = false">{{ $t('message.qx') }}</el-button>
      <el-button v-preventReClick type="primary" @click="clickReserveForm">{{ $t('message.qzf') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { enrollJointSite } from '@/api'
import MemberSearch from '@/components/MemberSearch'
import store from '@/store'
export default {
  components: {
    MemberSearch
  },
  data() {
    return {
      modalDialog: store.getters.dialog,
      editPd: false,
      showReserve: false,
      list: [],
      zprice: '',
      typeList: [this.$t('message.hydji'), this.$t('message.skdji')],
      userType: 0,
      cardNum: '',
      status: '',
      members: {},
      userName: '',
      userPhone: '',
      remarks: '',
      detail: {}
    }
  },
  methods: {
    open(detail) {
      this.showReserve = true
      this.detail = detail
      this.list = [detail]
      this.members = {}
      this.remarks = ''
      this.userPhone = ''
      this.userName = ''
      this.cardNum = ''
      this.userType = 0
      this.$nextTick(() => {
        this.$refs.memberSearch.clearSearch()
      })
    },
    skBtn() {
      this.userType = 1
      this.members = {}
      this.$refs.memberSearch.clearSearch()
    },
    memberSelect(item) {
      this.members = item
      this.cardNum = item.number
      this.userType = 0
    },
    memberClear() {
      this.members = {}
      this.cardNum = ''
    },
    clickReserveForm() {
      if ((this.userType === 0 && !this.members) || (this.userType === 0 && !this.cardNum)) {
        this.$message.info(this.$t('message.qsr') + this.$t('message.hy1'))
        return
      }
      enrollJointSite({
        param: {
          channelType: '02',
          userType: this.userType,
          id: this.detail.id,
          memberId: this.members.id,
          remarks: this.remarks,
          userName: this.userName || this.$t('message.sk'),
          userPhone: this.userPhone
        }
      }).then(res => {
        if (res.errorCode === '000000') {
          this.showReserve = false
          this.$emit('paymentShow', {
            detail: [this.detail],
            userType: this.userType,
            allPrice: this.detail.price,
            orderId: res.record.orderId,
            memberId: Number(this.userType) === 0 ? this.members.id : ''
          })
          this.members = ''
        }
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/variables.scss';
.zbt {
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #222222;
  line-height: 16px;
  margin-top: 20px;
  margin-bottom: 15px;
}

.memberFlex {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;

  .search {
    flex: 1;
  }
}

.member {
  width: 100%;
  background: #F7F7F7;
  margin-top: -10px;
  border-radius: 2px;
  padding: 16px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;

  div {
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #222222;
    width: 50%;
    line-height: 1.5;
    margin-top: 5px;

    &:nth-of-type(1),
    &:nth-of-type(2) {
      margin-top: 0;
    }

    span {
      color: $SecondColor;
    }
  }
}

.skCnt {
  margin-top: -10px;
  display: flex;
  margin-bottom: 20px;
}

.bzbt {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #222222;
  line-height: 14px;
  margin-bottom: 15px;
}

.dialog-footer {
  position: relative;

  .reserve-money {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #222222;
    position: absolute;
    left: 0;

    b {
      color: $SecondColor;
      font-size: 20px;
      margin-right: 4px;
    }
  }
}
</style>
